<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    #allmap {
        height: 100%;
        width: 100%;
    }
    ul li {
        list-style: none;
    }
    .btn-wrap {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 75px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=umqlwjBDU0Xiuh6GAIh2IuIEHoLzfcRW"></script>
    <title>地图</title>
</head>
<body>
    <div id="allmap"></div>
    <ul class="btn-wrap" style="z-index: 99;">
        <li class = "light btn" onclick = "normalMap()">普通地图</li>
        <li class = "night btn" onclick = "earthMap()">卫星地图</li>
    </ul>
</body>
</html>
    <script type="text/javascript">

    // 地图属性
    var map = new BMapGL.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 12);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.setMapType(BMAP_NORMAL_MAP);      // 设置地图类型为普通模式
    
    // 获取数据
    fetch("/data", {
        method: "GET"
    })
    .then(res => res.json())
    .then(res => {
        var Line = res.transmission_line;
        var Tower = res.tower;
        var Stroke = res.stroke;

        // 初始化地图,设置中心点坐标和地图级别
        map.centerAndZoom(
            new BMapGL.Point(Line[0][0], Line[0][1]),
            12
        );

        // 统计输电线以及雷击点
        var Points = [];                // 输电线的点
        var d = 0.0;                    // 雷击点沿输电线到电塔的距离
        var p = [];                     // 雷击点的坐标
        var before = [null, null];      // 前一个点的坐标
        var key = Array(Stroke.length).fill(0);     // 判断是否达到距离
        Line.forEach((item, index) => {
            Points.push(new BMapGL.Point(item[0], item[1]));
            if (index !== 0) {
                x = (item[0] - before[0]) * 111322.2222 * Math.cos(before[0]);
                y = (item[1] - before[1]) * 111136.1111;
                d += Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

                Stroke.forEach((e, index) => {
                    if (key[index] == 0 && d >= e.thunder_distance) {
                        p.push({
                            point: [item[0], item[1]],
                            time: e.lighting_time,
                        });
                        key[index] = 1;
                    }
                }); 
            }
            before[0] = item[0];
            before[1] = item[1];
        });

        // 显示输电线以及雷击点
        map.addOverlay(new BMapGL.Polyline(
            Points,
            {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1.0
            }
        ));
        Tower.forEach((item, index)=> {
            map.addOverlay(new BMapGL.Marker(
                new BMapGL.Point(item[0], item[1]),
                {
                    title: "电塔"+(index+1),
                    icon: new BMapGL.Icon(
                        "/static/icon/tower.png", 
                        new BMapGL.Size(30, 30),
                        {
                            anchor: new BMapGL.Size(15, 30)
                        }
                    )
                }
            ));
        });
        console.log(p)
        p.forEach((item) =>{
            map.addOverlay(new BMapGL.Marker(
                new BMapGL.Point(item.point[0], item.point[1]),
                {
                    title: "雷击时间: " + item.time
                }
            ));
        });
    })
    .catch(error => {
        console.error("Error:", error);
    });

    // 鼠标事件
    function normalMap() {
        map.setMapType(BMAP_NORMAL_MAP);      // 设置地图类型为普通模式
    }

    function earthMap() {
        map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为普通模式
    }
    </script>